<template>
  <div class="exam-list">
    <header>
      <!-- 搜索框 -->
      <input v-model="searchQuery" type="text" placeholder="搜索学生名字" @input="filterExams">
    </header>
    <section class="exam-table">
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="试卷id"
          width="180"
        />
        <el-table-column
          prop="subject"
          label="科目"
          width="180"
        />
        <el-table-column
          prop="top"
          label="最高分"
        />
        <el-table-column
          prop="lowest"
          label="最低分"
        />
        <el-table-column
          prop="average_score"
          label="平均分"
        />
        <el-table-column
          prop="number"
          label="人数"
        />
        <el-table-column
          prop="certificate_designation"
          label="证书"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script>
import { getStatistics } from '@/api/user'
export default {
  name: 'ExamList',
  data() {
    return {
      tableData: [],
      searchQuery: '',
      filteredExams: []
    }
  },
  created() {
    this.filteredExams = this.exams
    this.ExamList()
  },
  methods: {
    async ExamList() {
      console.log('Request:', this.user)
      try {
        const response = await getStatistics()
        console.log(response)
        this.tableData = response.data
        // 处理响应
      } catch (error) {
        // 处理错误
        console.error('Error:', error)
      }
    },
    filterExams() {
      if (this.searchQuery) {
        this.filteredExams = this.exams.filter(exam =>
          exam.name.toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      } else {
        this.filteredExams = this.exams
      }
    }
  }
}
</script>

<style scoped>
.exam-list header {
  margin-bottom: 20px;
}
.exam-table table {
  width: 100%;
  border-collapse: collapse;
}
.exam-table th, .exam-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.exam-table th {
  background-color: #f2f2f2;
}
</style>
